import AMapLoader from '@amap/amap-jsapi-loader'
import { SettingOutlined } from '@ant-design/icons'
import { Drawer, Button, Form, Select } from 'antd'
import { useEffect, useRef, useState } from 'react'
import { themeList } from './data'
import styles from './index.module.less'

const AMap = () => {
  const mapRef = useRef(null)
  const [open, setOpen] = useState(false)
  const [form] = Form.useForm()

  useEffect(() => {
    window._AMapSecurityConfig = {
      securityJsCode: '1ba2169ca446dad1b7621d7bb946dccd'
    }

    AMapLoader.load({
      key: 'da2c614540714e271296f2c7d7d51af4',
      version: '2.0',
      plugins: ['AMap.Scale']
    }).then((AMap) => {
      // 标准图层
      //let layer = new AMap.createDefaultLayer({
      //  zooms: [3, 20], //可见级别
      //  visible: true, //是否可见
      //  opacity: 1, //透明度
      //  zIndex: 0 //叠加层级
      //})

      //// 卫星与路网图层
      ////创建卫星图层
      //let satellite = new AMap.TileLayer.Satellite()
      ////创建路网图层
      //let roadNet = new AMap.TileLayer.RoadNet()

      //// 实时交通图层
      //let traffic = new AMap.TileLayer.Traffic({
      //  autoRefresh: true, //是否自动刷新
      //  interval: 180 //刷新间隔，默认180s
      //})
      ////mapRef.current.addLayer(traffic)

      mapRef.current = new AMap.Map('container', {
        zoom: 10, //地图级别
        center: [116.397428, 39.90923], //地图中心点
        mapStyle: 'amap://styles/whitesmoke', //设置地图的显示样式
        viewMode: '2D', //设置地图模式
        terrain: true //开启地形
        //layers: [layer]
        //layers: [satellite, roadNet]
        //layers: [traffic]
      })

      //异步加载控件
      AMap.plugin([
        // 地图控件
        'AMap.ToolBar', 'AMap.Scale', 'AMap.ControlBar', 'AMap.Geolocation', 'AMap.HawkEye', 'AMap.MapType',
        // 服务类
        'AMap.PlaceSearch', 'AMap.Driving'
      ], function() {
        const toolbar = new AMap.ToolBar() //缩放工具条实例化
        const scale = new AMap.Scale() //比例尺实例化
        const controlBar = new AMap.ControlBar() //控制条实例化
        const geolocation = new AMap.Geolocation() //定位实例化
        const hawkEye = new AMap.HawkEye() //瞭望眼实例化
        const mapType = new AMap.MapType() //地图类型实例化
        mapRef.current.addControl(toolbar) //添加控件
        mapRef.current.addControl(scale) //添加控件
        mapRef.current.addControl(controlBar) //添加控件
        mapRef.current.addControl(geolocation) //添加控件
        mapRef.current.addControl(hawkEye) //添加控件
        mapRef.current.addControl(mapType) //添加控件


        //地点搜索
        //const placeSearch = new AMap.PlaceSearch({
        //  pageSize: 5, //单页显示结果条数
        //  pageIndex: 1, //页码
        //  city: '010', //兴趣点城市
        //  citylimit: true, //是否强制限制在设置的城市内搜索
        //  map: mapRef.current, //展现结果的地图实例
        //  panel: 'panel', //参数值为你页面定义容器的 id 值<div id="my-panel"></div>，结果列表将在此容器中进行展示。
        //  autoFitView: true //是否自动调整地图视野使绘制的 Marker 点都处于视口的可见范围
        //})
        //placeSearch.search('北京大学') //使用插件搜索关键字并查看结果


        //驾车导航
        const points = [
          { keyword: '北京市地震局（公交站）',city:'北京' }, //起始点坐标
          { keyword: '亦庄文化园（地铁站）',city:'北京' } //终点坐标
        ]
        const driving = new AMap.Driving({
          map: mapRef.current,
          panel: 'my-panel' //参数值为你页面定义容器的 id 值<div id="my-panel"></div>
        })
        //获取起终点规划线路
        driving.search(points, function (status, result) {
          if (status === 'complete') {
            //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误
            //查询成功时，result 即为对应的驾车导航信息
            console.log(result)
          } else {
            console.log('获取驾车数据失败：' + result)
          }
        })
      })
    }).catch((e) => {
      console.log(e)
    })

    return () => {
      mapRef.current?.destroy()
    }
  }, [])

  const showDrawer = () => {
    setOpen(true)
  }

  const onClose = () => {
    setOpen(false)
  }

  const handleThemeChange = (value) => {
    const theme = themeList.find((item) => item.value === value)
    mapRef.current.setMapStyle('amap://styles/' + theme.value)
  }

  return (
    <div className={styles['aMap-container']}>
      <div id="container" style={{ height: '100%' }}>AMap</div>
      <div id="panel" className={styles['panel']}></div>
      <div id="my-panel" className={styles['panel']}></div>

      <Button
        type="primary"
        onClick={showDrawer}
        icon={<SettingOutlined />}
        className={styles['setting-btn']}
      ></Button>

      <Drawer title="Basic Drawer" onClose={onClose} open={open}>
        <Form form={form}>
          <Form.Item name="theme" label="主题样式">
            <Select
              defaultValue="whitesmoke"
              options={themeList}
              onChange={handleThemeChange}
            />
          </Form.Item>
        </Form>
      </Drawer>
    </div>
  )
}

export default AMap